import { Tabs, Tab } from '@theme';

# ResolveLoader

该配置项和 [`resolve`](/config/resolve) 的类型保持一致，但这个配置仅会对 [loader](/guide/features/loader) 的解析生效。

- **类型：** 与 [`resolve`](/config/resolve) 保持一致
- **默认值：**

```js
{
  conditionNames: ["loader", "require", "node"],
  exportsFields: ["exports"],
  mainFields: ["loader", "main"],
  extensions: [".js"],
  mainFiles: ["index"]
}
```

## 示例

比如，你在进行 loader 的开发，但又希望能在 loader 的使用示例中以用户视角展示使用方式，你可以这样写：

<Tabs>
  <Tab label="ESM">

```js title="rspack.config.mjs"
import { createRequire } from 'module';

const require = createRequire(import.meta.url);

export default {
  resolveLoader: {
    alias: {
      'amazing-loader': require.resolve('path-to-your-amazing-loader'),
    },
  },
};
```

  </Tab>
  <Tab label="CJS">

```js title="rspack.config.cjs"
module.exports = {
  resolveLoader: {
    alias: {
      'amazing-loader': require.resolve('path-to-your-amazing-loader'),
    },
  },
};
```

  </Tab>
</Tabs>

然后，在 example 的代码中这么写：

```js
require('!!amazing-loader!./amazing-file.js');
```

::: info 内联 loader
上述的 loader 使用的是内联 loader 的语法，详情请参考[这里](/api/loader-api/index)
:::
